<template>
  <div class="page-body-div">
    <!-- <el-steps
      :active="0"
      class="px-5 py-2"
      align-center
      finish-status="success"
    >
      <el-step title="发送账号"></el-step>
      <el-step title="收件列表"></el-step>
      <el-step title="编辑邮件"></el-step>
      <el-step title="发送参数"></el-step>
      <el-step title="开始发送"></el-step>
    </el-steps> -->
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="Begin" name="tabOne" disabled />
      <el-tab-pane :label="$t('email.senderAccount')" name="first">
        <div class="menu-tab-div">
          <sender-account ref="senderList" :addresser.sync="form.Addresser" />
        </div>
      </el-tab-pane>
      <el-tab-pane label=">>>" name="tabTwo" disabled />
      <el-tab-pane :label="$t('email.receivers')" name="second">
        <div class="menu-tab-div">
          <receiver-list
            ref="receiverList"
            :addressee.sync="form.Addressee"
            :emails-temp="emailsTemp"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label=">>>" name="tabThree" disabled />
      <el-tab-pane :label="$t('email.emailContent')" name="third">
        <div class="menu-tab-div">
          <div class="menu-tab-div-body">
            <TemplateList
              ref="templateList"
              :templates.sync="form.selectedTemplates"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label=">>>" name="tabFour" disabled />
      <el-tab-pane :label="$t('email.sendVariables')" name="fourth">
        <div class="menu-tab-div">
          <div class="menu-tab-div-body">
            <div style="height: 40%">
              <el-form
                ref="form"
                :model="form"
                :rules="form"
                label-width="120px"
                class="w-full text-left m-2.5"
              >
                <el-form-item :label="$t('email.taskName')" prop="Title">
                  <el-input
                    v-model="form.Title"
                    class="!w-80"
                    :minlength="1"
                    show-word-limit
                    :maxlength="50"
                    clearable
                  ></el-input>
                  <span class="ml-4 text-gray-400"
                    >* 可以自己命名或使用系统默认</span
                  >
                </el-form-item>
                <el-form-item :label="$t('email.replyEmail')" prop="ReplyEmail">
                  <el-input class="!w-80" v-model="form.ReplyEmail"></el-input>
                  <span class="ml-4 text-gray-400"
                    >*
                    填写一个收信地址,如果有回复,将会回复到此指定地址,如果不填写,则默认回复到发件箱</span
                  >
                </el-form-item>
                <el-form-item label="发送时间间隔" prop="sendInterval">
                  <el-input-number
                    v-model="form.minSendInterval"
                    class="!w-35"
                    :min="1"
                    :max="form.maxSendInterval"
                  />
                  <span class="px-5">-</span>
                  <el-input-number
                    class="!w-35"
                    v-model="form.maxSendInterval"
                    :min="form.minSendInterval"
                  />
                  <span class="ml-4 text-gray-400"
                    >*
                    单位是秒,发信速度过快,容易被邮箱服务商限制,默认1-180</span
                  >
                </el-form-item>
                <el-form-item :label="$t('email.sendMethod')">
                  <el-radio-group v-model="form.sendMethod">
                    <el-radio :label="0" border>{{
                      $t('email.randomSend')
                    }}</el-radio>
                    <el-radio :label="1" border>{{
                      $t('email.ascSend')
                    }}</el-radio>
                  </el-radio-group>
                  <!-- <span class="ml-4 text-gray-400"
                    >* 可以自己命名或使用系统默认</span
                  > -->
                </el-form-item>
                <el-form-item label="发送邮件内容">
                  <el-radio-group v-model="form.sendTemplateMethod">
                    <el-radio :label="0" border>随机选择</el-radio>
                    <el-radio :label="1" border>顺序选择</el-radio>
                  </el-radio-group>
                  <!-- <span class="ml-4 text-gray-400"
                    >* 可以自己命名或使用系统默认</span
                  > -->
                </el-form-item>
                <el-form-item label="阅读状态跟踪">
                  <el-switch v-model="form.trackReadStatus" />
                  <!-- <span class="ml-4 text-gray-400"
                    >* 可以自己命名或使用系统默认</span
                  > -->
                </el-form-item>
                <el-button
                  class="!ml-30 !mt-10"
                  type="primary"
                  plain
                  @click="saveSettings"
                  >保存配置</el-button
                >
                <!-- <div>
                  <p sytle="color:red;">{{ $t('email.moreSettings') }}</p>
                </div> -->
              </el-form>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label=">>>" name="tabFive" disabled />
      <el-tab-pane :label="$t('email.startSend')" name="fifth">
        <div class="menu-tab-div">
          <div class="menu-tab-div-body">
            <start-send
              :handle-random-select="handleRandomSelect"
              :form="form"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="End" name="tabSix" disabled />
    </el-tabs>
  </div>
</template>
<script>
import ReceiverList from './addStep/receiverList'
import TemplateList from './addStep/templateList'
import SenderAccount from '@/views/email/emailSendFree/addStep/senderAccount'
import { SendEmailSettingsModule } from '@/store/modules/sendEmailSettings'
import { RunningEmailTaskModule } from '@/store/modules/runningEmailTask'
import StartSend from './addStep/startSend.vue'
export default {
  name: 'baseform',
  props: {
    emailsTemp: '',
  },
  components: {
    SenderAccount,
    ReceiverList,
    TemplateList,
    StartSend,
  },
  data: function () {
    let settings = this.$store.state.sendEmailSettings
    return {
      /// //////////////////////////Public//////////////////////////////////
      activeName: 'first',
      form: {
        Title: settings.title,
        Addresser: [],
        ShowAsEmail: false,
        ReplyEmail: settings.replyEmail,
        Addressee: [],
        TimingTransmission: null,
        TypeOfRequest: 'free',
        State: 1,
        minSendInterval: settings.minSendInterval,
        maxSendInterval: settings.maxSendInterval,
        sendMethod: settings.sendMethod || 0,
        sendTemplateMethod: settings.sendTemplateMethod || 0,
        trackReadStatus:
          typeof settings.trackReadStatus !== 'boolean' ||
          settings.trackReadStatus,
        selectedTemplates: [],
      },
      searchAddresser: '',
      /// //////////////////////////编辑邮件//////////////////////////////////
      showSelectTemplateVisible: false,
      /// //////////////////////////验证规则//////////////////////////////////
    }
  },
  computed: {
    isRunning() {
      return !!RunningEmailTaskModule.inner.id
    },
  },
  created() {
    if (this.isRunning) this.activeName = 'fifth'
  },
  methods: {
    saveSettings() {
      SendEmailSettingsModule.ChangeSendEmailSetting({
        title: this.form.Title,
        replyEmail: this.form.ReplyEmail,
        minSendInterval: this.form.minSendInterval,
        maxSendInterval: this.form.maxSendInterval,
        sendMethod: this.form.sendMethod,
        sendTemplateMethod: this.form.sendTemplateMethod,
        trackReadStatus: this.form.trackReadStatus,
      })
      this.$message.success('保存配置成功')
    },
    querySearch(queryString, cb) {
      const restaurants = this.sendAccountOptions
      const results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },

    /// ///////////////////////////发送参数/////////////////////////////////

    /** 随机选择数据 */
    handleRandomSelect(cmd) {
      this.$refs.senderList.randomSelect()
      this.$refs.templateList.randomSelect()
      this.$refs.receiverList.randomSelect(cmd)
    },
  },
}
</script>

<style lang="scss" scoped>
/////////////////////////////Public//////////////////////////////////
.page-body-div {
  padding: 5px 5px 0px;
  background-color: white;
}
.menu-tab-div {
  padding: 20px 0px 0px 20px;
  width: 100%;
  height: calc(100vh - 180px);
}
.menu-tab-div-body {
  margin: 10px;
  text-align: center;
  height: 100%;
}

/////////////////////////////编辑邮件//////////////////////////////////
</style>
